<!-- 库存明细账 -->
<template>
  <view class="inventoryledger">
    <view class="top mb20">
      <view class="screen tr f28" @click="showFilters">
        <van-icon name="filter-o" color="#3E3D3D" />筛选
      </view>
      <view class="title tc fwbold"> 库存明细账 </view>
      <view class="time-box tc">{{ time_region.start_time }} ~ {{ time_region.end_time }}</view>
    </view>
    <view class="card">
      <van-tabs type="card" :active="active"  color="#62B158"   @change="tabChange"
      >
      <van-tab v-for="(v,i) in isOpening" :key="i" :title="v.opening_name" :name="v.is_opening" line-height="100px">
          <view class="content">
            <view class="item-box mt30" v-for="(item, index) in purchaseOrderList" :key="index" >
              <view class="list-item-title flexb f28 fwbold">
                <view class="name flexAI">
                  <view class="point br50 mr10"></view>
                  <view>品名：{{ item.goods_name }}</view>
                </view>
                <view> 数量：{{ item.goods_num }} </view>
              </view>
              <view class="supplier"> 供应商：{{ item.supplier_name }} </view>
              <view class="time-price flexb">
                <view> 生产日期：{{ item.productiontime }} </view>
                <view>
                  单价：<text>{{ item.shop_price }}</text>
                </view>
              </view>
              <view class="total-inventory flexb mt10">
                <view> 总库存量：{{ item.stock_num }} </view>
                <view>
                  总库存金额：<text>￥{{ item.stock_money }}</text>
                </view>
              </view>
            </view>
          </view>
        </van-tab>
       
      </van-tabs>
    </view>
    <!-- 筛选条件 -->
    <van-popup
      :show="show"
      custom-style="width: 85%"
      @close="onFilterClose"
      position="right"
      root-portal
    >
      <view class="popbox">
        <view class="top flexb f26">
          <view> 筛选条件 </view>
          <van-icon @click="offShow" name="clear" size="50rpx"></van-icon>
        </view>
        <view class="form-box">
          <my-picker
            :form="screenForm"
            name="name"
            @click-input="changeCatarr"
            :columns="catarrList"
            value-key="name"
            label="品类"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="goods_name"
            @click-input="changeGoodsName"
            :columns="goods_list"
            value-key="goods_name"
            label="品名"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-multi
            :form="screenForm"
            name="expected_date"
            @click-input="changeDate"
            label="日期"
            placeholder="出库日期"
            :norequired="true"
          >
          </my-multi>
          <my-picker
            :form="screenForm"
            name="opening_name"
            @click-input="changeOpening"
            :columns="isOpening"
            value-key="opening_name"
            label="操作类型"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <my-picker
            :form="screenForm"
            name="supplier_name"
            @click-input="changeSupplier"
            :columns="supplier"
            value-key="supplier_name"
            label="供应商"
            placeholder="请选择"
            :norequired="true"
          ></my-picker>
          <van-input
            v-model="screenForm.address"
            clearable
            label="产地"
            placeholder="请填写产地"
            :norequired="true"
          >
          </van-input>
            
        </view>
        <view class="btn-style flexb">
          <van-button color="#999999" type="info" @click="screenReset">重置</van-button>
          <van-button color="#62B158" type="info" @click="screenSubmit">提交</van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      form: {},
      show: false,
      active: "0", //0入库 1出库
      screenForm: {
        expected_date: "",
        address: "", //产地
        start_time: "", //开始日期
        end_time: "", //结束日期
        is_opening:"0",
        opening_name:"出库"

      },
      purchaseOrderList: [],
      catarrList: [], //分类
      goods_list: [], //商品
      isOpening: [], //出入库
      supplier: [], //供应商
      time_region: {}, //时间
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad() {},
  methods: {
    onFilterClose(){
      this.show = false;
    },
    /*重置*/
    screenReset(){
      this.screenForm = {};
    } ,
    /*筛选提交*/
    async screenSubmit() {
      this.active = this.screenForm.is_opening;
      await this.getSearchdetail({row:this.screenForm})
      this.show = false;
      
    },
    /*供应商*/
    changeSupplier(key, value) {
      this.$set(this.screenForm, "supplier", value["supplier"]);
      this.$set(this.screenForm, key, value["supplier_name"]);
    },
    /*操作类型*/
    changeOpening(key, value) {
      // 确认提交了再去修改 
      this.$set(this.screenForm, "is_opening", value["is_opening"]);
      this.$set(this.screenForm, key, value["opening_name"]);
    },
    /*品名数据列表*/ 
    async getGoods(code){
      let res = await this.$ajax.inGetgoods({
        code :code
      })
      if (res.code == 1) {
        this.goods_list = res.data;
      }
    },
    /*品名*/
    changeGoodsName(key, value) {
      this.$set(this.screenForm, "goods_sn", value["goods_sn"]);
      this.$set(this.screenForm, key, value["goods_name"]);

    },
    /*分类(品类)*/
    changeCatarr(key, value) {
      this.$set(this.screenForm, "code", value["code"]);
      this.$set(this.screenForm, key, value["name"]);
      this.getGoods(this.screenForm.code)
    },
    /*获取下拉信息*/
    async getConditiondetail() {
      let res = await this.$ajax.inConditiondetail();
      if (res.code == 1) {
        this.catarrList = res.data.catarr;
        this.isOpening = res.data.is_opening[0];
        this.supplier = res.data.supplier;
        this.active = this.isOpening[0].is_opening;
        this.getSearchdetail({is_opening:this.active})
      }
    },
    /*改变*/
    tabChange(v) {
      this.active = v.target.name;
      this.$set(this.screenForm,'opening_name',this.isOpening.find((item)=>item.is_opening==v.target.name).opening_name)
      this.$set(this.screenForm,'is_opening',v.target.name)
      this.getSearchdetail({
        is_opening:this.active
      });
    },
    /*库存明细账*/
    async getSearchdetail(params) {
      let res = await this.$ajax.inSearchdetail(params);
      if (res.code == 1) {
        this.purchaseOrderList = res.data.info;
        this.time_region = res.data.time_region;
      }
    },
    /*筛选弹出层*/
    showFilters() {
      this.show = true;
    },
    /*关闭*/
    offShow() {
      this.show = false;
    },
    /* 日历组件（事件）*/
    changeDate(key, value) {
      this.$set(this.screenForm, [key],`${value.start_date}-${value.end_date}`);
      this.dateShow = true;
      this.screenForm.start_time = value.start_date; //开始日期
      this.screenForm.end_time = value.end_date; //结束日期
    },
    onDateConfirm(date) {
      console.log(date);
      this.screenForm.expected_date = this.formatDate(date.detail);
      this.dateShow = false;
    },
    onDateClose() {
      this.dateShow = false;
    },
    changeFormData(event) {
      const key = event.target.dataset.name;
      this.form[key] = event.detail;
    },
    changeAddFormData(event) {
      const key = event.target.dataset.name;
      this.screenForm[key] = event.detail;
    },
  },

  mounted() {
    this.getConditiondetail();
    // this.getSearchdetail();
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "库存明细账",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>
  
<style lang="scss">
// 筛选条件
.popbox {
  height: 100vh;
  width: 100%;
  padding: 4rpx;

  .top {
    padding: 20rpx;
    color: rgba(16, 16, 16, 1);
    font-family: SourceHanSansSC-bold;
  }

  .form-box {
  }

  .btn-style {
    margin-top: 300rpx;
    padding: 20rpx;

    .van-button {
      width: 180rpx;
    }
  }
}

.inventoryledger {
  height: 100%;
  min-height: 100vh;
  background: rgba(244, 244, 244, 1);
  padding: 20rpx;

  .top {

    .screen {
      width: 100%;
      color: rgba(16, 16, 16, 1);
    }

    .title {
      color: rgba(16, 16, 16, 1);
      font-size: 35rpx;
      font-family: SourceHanSansSC-regular;
    }

    .time-box {
      color: rgba(16, 16, 16, 1);
      font-size: 25rpx;
      font-family: SourceHanSansSC-regular;
      margin-top: 15rpx;
    }
  }

  .card {

    .content {
      .item-box {
        background: white;
        width: 100%;
        border-radius: 16rpx;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(134, 127, 127, 0.05);
        padding: 20rpx 20rpx;
        line-height: 50rpx;

        .list-item-title {

          .name {
            color: rgba(16, 16, 16, 1);
            font-family: SourceHanSansSC-bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              background: rgba(98, 177, 88, 1);
            }
          }
        }

        .time-price {
          border-bottom: 0.5rpx solid #e7e4e4;
          padding-bottom: 15rpx;

          text {
            color: red;
          }
        }

        .total-inventory {

          text {
            color: rgb(222, 13, 13);
            font-weight: bold;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}
</style>